<template>
  <div>
    <!--查询表单-->
    <el-form label-position="right" size="small" :inline="true" :model="queryForm" label-width='90px' class="query-form">
      <el-form-item label="区域">
        <el-input v-model="queryForm.qy" clearable placeholder=""></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="getData(1)">查询</el-button>
        <el-button type="primary" icon="el-icon-circle-plus" size="small" @click="dialogAddVisible = true">新增</el-button>
      </el-form-item>
    </el-form>

    <!--客户表格数据展示-->
    <el-table class="table" ref="table" :data="tableData"
        border style="width: 100%; margin-top: 20px;" :header-cell-style="{padding: 0,height: '34px'}"
        @sort-change="sortChange"
      >
      <el-table-column prop="qy" label="区域" sortable="custom" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="name" label="网格" sortable="custom" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="getMembers(scope.row.id)" size="mini" style="padding: 4px 6px;">成员</el-button>
          <el-button type="primary" @click="delWg(scope.row.id)" size="mini" style="padding: 4px 6px;">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--客户表格数据分页-->
    <el-pagination v-if="count" background layout="total,prev, pager, next"
                   :page-size="pageSize"
                   @current-change="getData"
                   :current-page="currentPage"
                   :total="count" style="float: right;margin-bottom: 20px;">
    </el-pagination>

    <!--新增-->
    <el-dialog title="新增" width="600px" @open="openAdd" @close="closeAdd" class="dialogAdd"
               :visible.sync="dialogAddVisible" :close-on-click-modal='false'>
      <el-form ref="addForm" style="margin-right: 20px;" :model="addForm" :rules="addFormRules" label-position="right" label-width="100px" size="small">
        <el-form-item label="区域" prop="qy">
          <el-select v-model="addForm.qy" clearable>
            <el-option
              v-for="value in config.qyList"
              :key="value"
              :label="value"
              :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="网格名称" prop="name">
          <el-input v-model="addForm.name"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>

    </el-dialog>
    <!--查看装维人员-->
    <el-dialog title="网格成员" width="600px" class="dialog"
               :visible.sync="dialogViewVisible" @close="staffName=''" :close-on-click-modal='false'>
      <!--表格数据展示-->
      <el-form style="margin-right: 20px;" :inline="true" label-position="right" label-width="80px" size="small">
        <el-form-item label="选择成员">
          <el-form-item>
              <el-select v-model="staffName" size="small" filterable clearable placeholder="请输入员工姓名或工号">
                  <el-option
                      v-for="item in allStaff"
                      :key="item.id"
                      :label="item.cname + '(' + item.id + ')'"
                      :value="item.id + '/' + item.cname">
                      <span style="float: left">{{ item.cname + '(' + item.id + ')' }}</span>
                  </el-option>
              </el-select>
          </el-form-item>
          <el-checkbox v-model="type">是否设置为社区经理&nbsp;&nbsp;</el-checkbox>
          <el-button type="primary" size="small" @click="addMember">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table class="table" :data="memberList" :header-cell-style="{padding: 0,height: '34px'}"
          max-height="500" border style="width: 100%;"
        >
        <el-table-column prop="userId" sortable="custom" label="用户名"></el-table-column>
        <el-table-column prop="userCname" sortable label="姓名"></el-table-column>
        <el-table-column prop="type" sortable label="类别"></el-table-column>
        <el-table-column sortable label="操作">
          <template slot-scope="scope">
            <el-button type="primary" @click="delMember(scope.row.id, scope.$index)" size="mini" style="padding: 4px 6px;">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogViewVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'WgManage',
  data () {
    return {
      queryForm: {},    //  查询条件
      prop: 'name', //  排序属性
      order: 1,    //  排序 升序、降序
      tableData: [],    //  当前页数据
      count: '',      //  总数据条数
      currentPage: 1,//默认开始页面
      pageSize: 20,//每页的数据条数
    /************************新增网格********************* */
      addForm: {
        qy: '',
        name: ''
      },                //  新增表单 (选择框字段需要先定义)
      addFormRules:{
          qy: [{ required: true, validator: this.isNull, trigger: 'change' }],
          name: [{ required: true, validator: this.isNull, trigger: 'blur' }],
      },//新增校验规则
      dialogAddVisible: false,    //  新增模态框
    /************************成员列表********************* */
      dialogViewVisible: false,
      memberList: [],   //  成员列表
      wgId: '',
      allStaff: [],     //  所有员工
      staffName: '',    //  新增员工姓名
      type: '',
    }
  },
  mounted(){
    this.getData(1)
    this.getAllStaff()
    console.log(this.config)
  },

  methods: {
    getData(val){
      this.currentPage = val
      let params = {}
      let queryForm = this.deepClone(this.queryForm)
      params.currentPage = val
      params.pageSize = this.pageSize
      params.queryForm = queryForm
      params.prop = this.prop
      params.order = this.order
      this.$post("/api/WgController/getList",params, (data) => {
        this.tableData = data.list;
        this.count = data.count;
      })
    },
    // 排序
    sortChange(obj){
      this.prop = obj.prop || "createTime"
      this.order = obj.order == 'ascending' ? 1 : -1
      this.getData(1)
    },

    //  删除网格
    delWg(id){
      this._confirm('确定删除吗?', () => {
        this.$post('/api/WgController/delOne', {id: id}, (data) => {
          this.$message.success("删除成功！")
          this.getData(1)
        })
      })
    },
  /******************新增网格***************** */
    // 打开新增模态框
    openAdd(){},
    // 关闭新增模态框
    closeAdd(){
      this.$refs.addForm.resetFields()
    },
    // 确定新增
    add(){
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.$post("/api/WgController/addOne", this.addForm, (data) => {
            this.$message.success("添加成功！")
            this.dialogAddVisible = false
            this.getData(1)
            console.log(data)
          })
        }
      })
    },
  /******************查看装维人员***************** */
    //  获取所有员工
    getAllStaff(){
      let params = {}
      params.currentPage = 1
      params.queryForm = {}
      params.prop = 'id'
      params.order = 1
      this.$post("/api/UserController/getList",params, (data) => {
        this.allStaff = data.list;
      })
    },
    //  获取装维人员
    getMembers(id){
      this.wgId = id
      this.memberList = []
      this.dialogViewVisible = true
      this.$post("/api/WgController/getMembers", {id: id}, (data) => {
        this.memberList = data.list
      })
    },
    //  添加装维人员
    addMember(id){
      let params = {
        parentId: this.wgId,
        userId: this.staffName.split('/')[0],
        userCname: this.staffName.split('/')[1],
        type: this.type ? '社区经理' : '装维人员'
      }
      this.$post("/api/WgController/addMember", params, (data) => {
        this.memberList.push(data.member)
      })
    },
    //  删除装维人员
    delMember(id, index){
      console.log(index)
      this._confirm('确定删除吗?', () => {
        this.$post('/api/WgController/delMember', {id: id}, (data) => {
          this.$message.success("删除成功！")
          this.memberList.splice(index, 1)
        })
      })
    },
  }
}
</script>

<style lang="less" scoped>
  .dialogAdd {
    .el-input, .el-cascader, .el-select, .el-textarea {
      width: 400px;
    }
  }
</style>

